<template>
	<view>
		<u-navbar title="咨询师绑定" :immersive="true" style="height: 88upx;">
			<view slot="right" style="margin-right: 40upx;font-size: 40upx;font-weight: bold;margin-bottom: 30upx;">...</view>
		</u-navbar>
		<view class="Consultantbinding-auto">
			<view style="font-weight: bold;">填写信息</view>
			<u-form :model="form" ref="uForm">
				<view class="QRcodename">
					<u-form-item label="二维码名称" prop="name" label-width="160"><u-input v-model="form.name" placeholder="请输入二维码的名称" /></u-form-item>
				</view>
				<view class="ChooseCampus">
					<u-form-item :label-position="labelPosition" label="选择校区" prop="region" label-width="150">
						<u-input :border="border" type="select" :select-open="pickerShow" v-model="form.region" placeholder="请选择咨询师管辖的校区" @click="pickerShow = true"></u-input>
						<u-picker mode="region" v-model="pickerShow" @confirm="regionConfirm"></u-picker>
					</u-form-item>
				</view>
				<view class="Curriculumspecialty">
					<u-form-item :label-position="labelPosition" label="课程专业" prop="goodsType" label-width="150">
						<u-input :border="border" type="select" :select-open="selectShow" v-model="form.goodsType" placeholder="请选择咨询师所负责的课程" @click="selectShow = true"></u-input>
						<u-select mode="mutil-column-auto" :list="selectList" v-model="selectShow" @confirm="selectConfirm"></u-select>
					</u-form-item>
				</view>
				<view class="GenerateQRcode">
					<u-button type="primary" @click="submit">生成二维码</u-button>
				</view>
			</u-form>
		</view>
		<view class="Consultantbinding-bottom">
			<view class="Consultantbinding-bottom-QRcodelist" style="font-weight: bold;">二维码列表</view>
			<view class="Consultantbinding-bottom1" v-for="(item,index) in 5" :key="index">
				<u-row gutter="16">
					<u-col span="3">
						<view class="QRcode-img tck-box" @click.stop="open">
							<u-image width="100%" height="160rpx" :src="src"></u-image>
						</view>
					</u-col>
					<u-col span="7.5" style="padding: 0 0 0 8upx;">
						<view class="Campusname">临川校区英语咨询</view>
						<view class="time Typeface24"><u-icon name="clock" color="#999999" size="28" style="margin-right: 5px;"></u-icon>2021.04.15 10:43</view>
						<view class="Campusaddress Typeface24">校区：江西-抚州-临川</view>
						<view class="Curriculumspecialty1 Typeface24"><view>语言培训-成人英语-新概念英语</view></view>
					</u-col>
					<u-col span="1.5">
						<view class="tck-box tck-box1">
							<view class="delete" @click="open1">删除</view>
						</view>
					</u-col>
				</u-row>
			</view>
		</view>
		<view class="QRcode-img tck-box">
			<u-modal v-model="show" show-confirm-button title="" confirm-text="保存二维码">
				<image src="http://1812.img.pp.sohu.com.cn/images/blog/2009/11/18/18/8/125b6560a6ag214.jpg" style="width: 100%;margin-bottom: 35upx;"></image>
			</u-modal>
		</view>
		<view class="tck-box tck-box1">
			<u-modal v-model="show1" :content="content1" show-confirm-button show-cancel-button title="提示" confirm-text="确定" cancel-text="取消"></u-modal>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				show1: false,
				content1: '确认删除?',
				src: 'http://1812.img.pp.sohu.com.cn/images/blog/2009/11/18/18/8/125b6560a6ag214.jpg',
				border: false,
				selectShow: false,
				pickerShow: false,
				labelPosition: 'left',
				errorType: ['message'],
				form: {
					name: '',
					region: '',
					goodsType: ''
				},
				selectList: [
					{
						value: 1,
						label: '语言培训',
						children: [
							{
								value: 2,
								label: '成人英语',
								children: [
									{
										value: 3,
										label: '新概念英语'
									},
									{
										value: 4,
										label: '零基础英语'
									}
								]
							},
							{
								value: 5,
								label: '广西',
								children: [
									{
										value: 6,
										label: '南宁'
									},
									{
										value: 7,
										label: '桂林'
									}
								]
							}
						]
					},
					{
						value: 8,
						label: '设计培训',
						children: [
							{
								value: 9,
								label: '网页设计',
								children: [
									{
										value: 10,
										label: 'DW'
									}
								]
							}
						]
					}
				],
				rules: {
					name: [
						{ 
							required: true, 
							message: '请输入二维码的名称', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change','blur'],
						}
					],
					region: [
						{
							required: true,
							message: '请选择咨询师管辖的校区',
							trigger: 'change',
						}
					],
					goodsType: [
						{
							required: true,
							message: '请选择咨询师所负责的课程',
							trigger: 'change',
						}
					]
				}
			};
		},
		methods: {
			open() {
				this.show = true;
			},
			open1() {
				this.show1 = true;
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
					} else {
						console.log('验证失败');
					}
				});
			},
			// 选择地区回调
			regionConfirm(e) {
				this.form.region = e.province.label + '-' + e.city.label + '-' + e.area.label;
			},
			// 选择商品类型回调
			selectConfirm(e) {
				this.form.goodsType = '';
				e.map((val, index) => {
					this.form.goodsType += this.form.goodsType == '' ? val.label : '-' + val.label;
				})
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	};
</script>

<style>
	.tck-box  /deep/ .u-model{
		padding: 20px;
	}
	.tck-box  /deep/ .u-model__title{
		color: #666;
		font-weight: bold;
		padding: 0;
		text-align: left;
	}
	.tck-box  /deep/ .u-model__content__message{
		padding: 20px 0;
		text-align: left;
		color: #212121;
		line-height: 30px;
		text-align: justify;
		word-wrap: break-word;
		word-break: break-all;
		font-weight: 500;
	}
	.tck-box  /deep/ .u-model__footer{
		width: 100%;
	}
	.tck-box /deep/ .u-model__footer__button{
		height: 40px;
		line-height: 40px;
		border-radius: 5px;
	}
	.tck-box1  /deep/ .u-model__footer{
		width: 75%;
		float: right;
	}
	.tck-box1  /deep/ .u-model__footer__button{
		height: 35px;
		line-height: 35px;
		border-radius: 2px;
	}
	.QRcode-img /deep/ .u-model__footer__button{
		border-radius: 50px;
		margin: 0px 85upx;
		line-height: 38px;
		color: #87B847 !important;
		border: 1px solid #87B847;
	}
	.tck-box1  /deep/ .u-model__footer__button:nth-child(1){
		color: #999999 !important;
		background-color: #E5E5E5;
	}
	.tck-box1 /deep/ .u-model__footer__button:nth-child(2){
		color: #ffffff !important;
		margin-left: 20px;
		background-color: #87B847;
	}
	.tck-box  /deep/ .u-border-top:after{
		border: 0;
	}
	.tck-box /deep/ .u-mode-center-box{
		border-radius: 5px !important;
	}
</style>
<style lang="scss" scoped>
	.Consultantbinding-auto{
		padding: 30upx 30upx 0 30upx;
		border-bottom: 5px solid #F4F9FE;
	}
	.GenerateQRcode{
		padding: 30px 50px;
	}
	.Consultantbinding-bottom{
		padding: 30upx;
	}
	.Consultantbinding-bottom .delete{
		text-align: center;
		color: #87B847;
	}
	.Consultantbinding-bottom .Campusname{
		font-weight: bold;
		font-size: 30upx;
	}
	.Consultantbinding-bottom1{
		margin-top: 15px;
	}
	.Curriculumspecialty1{
		display: flex;
		flex-flow: row wrap;
	}
	.Typeface24{
		color: #666666;
		font-size: 24upx;
		margin-top: 10upx;
	}
</style>
